<template>
  <div id="roomState">
   <el-breadcrumb>
      <el-breadcrumb-item>房型管理</el-breadcrumb-item>
      <el-breadcrumb-item>房型图管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content clearfix">
      <div class="area-box">
        <span class="label">楼区</span>
        <el-select v-model="buildingId" placeholder="请选择楼区" @change="areaChange">
          <el-option v-for="item in roomRackNumList" :key="item.id" :label="item.num" :value="item.id"></el-option>
        </el-select>
      </div>
      <div class="floor-box">
        <span class="label">楼层</span>
        <el-select v-model="floorId" placeholder="请选择楼层" @change="floorChange">
          <el-option value="" label="全部"></el-option>
          <el-option v-for="item in floorList" :key="item.id" :label="item.floor" :value="item.id"></el-option>
        </el-select>
      </div>
      <div class="roomState-box">
        <el-select v-model="state" placeholder="请选择房态" @change="roomStateChange">
          <el-option value="" label="全部"></el-option>
          <el-option v-for="item in roomStateList" :key="item.state" :label="item.stateName" :value="item.state"></el-option>
        </el-select>
      </div>
      <div class="search-box" style="width:300px;margin-right:0">
        <el-input placeholder="请输入姓名/证件号码" class="input-with-select" v-model="searchVal">
        </el-input>
      </div>
      <el-button type="primary" class="search" @click="getList">
        <i class="el-icon-search"></i>
      </el-button>

    </div>
    <ul class="info clearfix">
      <li>提示</li>
      <li v-for="(item,index) in roomStateColor" :key="item.state">
        <span class="item-label" :style="{background:item.hue}"></span>{{item.roomStatus}}
      </li>
    </ul>
    <div class="main-box">
      <ul class="main-content clearfix">
        <li v-for="item in roomRackNumListDetail" :key="item.id" style="height:100px;">
          <div v-for="(i, index) in item.roomRackFloorList" :key="i.id" class="content-i clearfix" v-if="i.roomRackRoomList.length">
            <span class="content-label" style="float:left;height:100px;line-height:100px">{{i.floor}}</span>
            <div class="content-right" style="position:relateve">
              <div v-for="(ii,roomIndex) in i.roomRackRoomList" :key="ii.id" class="content-ii" @click="selectRoomType(ii,index+'-'+roomIndex)" :style="{background:roomStateColors[ii.roomState].color}">
                {{ii.roomNum}}<br/>{{ii.roomType}}<br/>{{ii.name}}
                <ul class="handle-box" v-if="currentIndex === index+'-'+roomIndex">
                  <li v-if="ii.roomState===1 || ii.roomState===2" v-has="'checkinaddrequestinfo'">
                    <el-button type="primary" class="search" style="width:100px" @click="openRoom">入住</el-button>
                    <i class="fa fa-close close" @click.stop="currentIndex = -1"></i>
                  </li>
                  <li v-if="(ii.roomState===3 || ii.roomState=== 4) && ii.checkInState !==3" v-has="'roomracksettle'">
                    <el-button type="primary" class="search" style="width:100px" @click="settle_accounts">结账</el-button>
                    <i class="fa fa-close close" @click.stop="currentIndex = -1"></i>
                  </li>
                  <li v-if="(ii.roomState===3 || ii.roomState=== 4 ) &&  ii.checkInState !==3" v-has="'roomrackcommodity'">
                    <el-button type="primary" class="search" style="width:100px" @click="account">商品入账</el-button>
                    <i class="fa fa-close close" @click.stop="currentIndex = -1"></i>
                  </li>
                  <li v-if="ii.roomState !==3 || ii.roomState !== 4" v-has="'roomrackupstate'">
                    <el-button type="primary" class="search" style="width:100px" @click="updateRoomState(ii.roomState)">变更房态</el-button>
                    <i class="fa fa-close close" @click.stop="currentIndex = -1"></i>
                  </li>
                </ul>

              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!-- 弹窗 -->
    <!-- 修改房间状态 -->
    <el-dialog :title="title" :visible.sync="dialog_roomState" width="30%" center>
      <div class="content-roomState">
        <ul>
          <li v-for="item in editRoomStateList" :key="item">
            <el-radio v-model="currentRoomState" :label="item.state" @change="currentState">{{item.stateName}}</el-radio>
          </li>
        </ul>

      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click.stop="dialog_roomState = false">取 消</el-button>
        <el-button type="primary" @click.stop="setState">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 查看每日房价 -->
    <el-dialog title="修改售价" :visible.sync="dialog_roomPrice" width="30%" center>
      <el-form :model="ruleFormPrice" :rules="rules" ref="ruleFormPrice" :inline="true">
        <div class="dialog_roomPrice">
          <div>
            <span class="label">&nbsp;日期: </span>
            {{formatData(date,'yyyy-MM-dd')}}
          </div>
          <div>
            <el-form-item label="售价:" prop="salePrice">
              <el-input placeholder="请输入售价" v-model="ruleFormPrice.salePrice" style="width:110%;"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="dialog-footer" style="text-align:center;margin-top:20px;">
          <el-button @click.stop="dialog_roomPrice = false">取 消</el-button>
          <el-button type="primary" @click="editPriceSure('ruleFormPrice')">确 定</el-button>
        </div>
      </el-form>
    </el-dialog>
    <!-- 入住 -->
    <el-dialog :title="title" :visible.sync="dialog_openRoom" width="60%" @close="close('ruleForm')" center>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="75px" :inline="true" class="demo-ruleForm">
        <div class="reserve-info">
          <div>
            <el-form-item label="办理方式" :required="true">
              <el-select placeholder="请选择办理方式" v-model="outType" @change="getInfo">
                <el-option label="前台办理" :value="2"></el-option>
                <el-option label="订单办理" :value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="入住单号" v-if="outType === 1" prop="checkInId">
              <el-select placeholder="请选择入住单号 " v-model="ruleForm.checkInId" @change="getInfo">
                <el-option v-for="item in billsList" :key="item.checkInId" :label="item.bills" :value="item.checkInId">
                </el-option>
              </el-select>
            </el-form-item>
          </div>

          <el-form-item label="房型" :required="true">
            <el-input placeholder="请输入房型" disabled="true" v-model="roomName"></el-input>
          </el-form-item>
          <el-form-item label="房间号" :required="true">
            <el-input placeholder="请输入房间号" disabled="true" v-model="buildingRoom.num"></el-input>
          </el-form-item>
          <el-form-item label="来源" prop="sourceId">
            <el-select placeholder="请选择来源" v-model="ruleForm.sourceId">
              <el-option v-for="item in sourcelList" :key="item.id" :label="item.sourcel" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="房价方案" prop="saleRoomId">
            <el-select placeholder="请选择房价方案" v-model="ruleForm.saleRoomId" @change="getPriceList">
              <el-option v-for="item in saleRoomList" :key="item.id" :label="item.saleRoomName" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="入住时间" prop="liveTime">
            <el-date-picker v-model="ruleForm.liveTime" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" :disabled="outType ===1" style="width: 100%;" @change="getPriceList">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="预离时间" prop="leaveTime">
            <el-date-picker type="date" placeholder="选择日期" style="width: 100%;" :disabled="outType ===1" v-model="ruleForm.leaveTime" value-format="yyyy-MM-dd" format="yyyy 年 MM 月 dd 日" @change="getPriceList"></el-date-picker>
          </el-form-item>
        </div>
        <div class="room-info">
          <el-form-item label="姓名" prop="person">
            <el-input v-model="ruleForm.person" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="身份证件" :required="true">
            <el-select placeholder="请选择身份证件 " v-model="ruleForm.papersId">
              <el-option v-for="item in papersList" :key="item.id" :label="item.papersType" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="证件号" prop="personId">
            <el-input placeholder="请输入证件号" v-model="ruleForm.personId"></el-input>
          </el-form-item>
          <el-form-item label="电话" prop="phone">
            <el-input placeholder="请输入电话" v-model="ruleForm.phone"></el-input>
          </el-form-item>
          <el-form-item label="出生年月" prop="comeFrom">
            <el-date-picker v-model="ruleForm.comeFrom" type="month" placeholder="选择出身年月日" value-format="yyyy-MM">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="性别" :required="true">
            <el-select placeholder="请选择性别" v-model="sex">
              <el-option label="男" value="1"></el-option>
              <el-option label="女" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="民族" :required="true">
            <el-select placeholder="请选择民族" v-model="nationId">
              <el-option v-for="item in nationList" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="地址">
            <el-input placeholder="请输入地址" style="width:400px" rows="10" class="address" v-model="address"></el-input>
          </el-form-item>
        </div>
        <div class="paly-info">
          <el-form-item label="支付方式" prop="paymentId">
            <el-select placeholder="请选择支付方式" v-model="ruleForm.paymentId" :disabled="this.checkInAddInfo.isPay ==2">
              <el-option v-for="item in paymentList" :key="item.id" :label="item.payType" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="押金" prop="pledgeMoney">
            <el-input placeholder="请输入押金" v-model="ruleForm.pledgeMoney" :disabled="this.checkInAddInfo.isPay ==2 || this.checkInAddInfo.sourceId ==7 "></el-input>
          </el-form-item>
          <el-form-item label="业务员" :required="true">
            <el-select placeholder="请选择业务员" v-model="staffName">
              <el-option v-for="item in staffList" :key="item.id" :label="item.staffName" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="总房价" v-if="orderRoomPricesList.length">
            <el-input v-model="totlePrice" :disabled="true"></el-input>
          </el-form-item>
          <div v-if="orderRoomPricesList.length" class="price-box">
            <el-form-item label="每日房价">
              <div class="price-button" v-for="(item,index) in orderRoomPricesList" :key="item.id" @click="editPrice(item,index)">
                <span>{{formatData(item.date,'yyyy-MM-dd')}}</span>
                <span style="color:#f2665d">售价</span>
                <span>{{item.salePrice}}</span>
                <span class="fa fa fa-pencil"></span>
              </div>
            </el-form-item>
          </div>
          <div class="remark">
            <el-form-item label="备注">
              <el-input type="textarea" placeholder="请输入备注" v-model="remark"></el-input>
            </el-form-item>
          </div>
        </div>
        <p class="dialog-footer" style="text-align:center;">
          <el-button @click.stop="close('ruleForm')">取 消</el-button>
          <!-- <el-button type="primary" @click="addSure">确 定</el-button> -->
          <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
        </p>
      </el-form>
    </el-dialog>
    <!-- 入账 -->
    <el-dialog title="商品入账" :visible.sync="dialog_account" width="60%" center>
      <div class="account-content">
        <div>
          <div>房号：{{commodityBill.roomNum}}</div>
          <div>房间类型：{{commodityBill.roomType}}</div>
          <div>客户姓名：{{commodityBill.person}}</div>
          <div>入住时间：{{commodityBill.liveTime}}</div>
        </div>
        <div>
          <div>来源：{{commodityBill.source}}</div>
          <div>入住单号：{{commodityBill.source}}</div>
          <div>房价方案：{{commodityBill.saleRoom}}</div>
          <div></div>
        </div>
      </div>
      <ul class="miNiCommListTable" style="max-height:450px;overflow-y:auto;">
        <li class="header">
          <div>编号</div>
          <div>商品名称</div>
          <div>单位</div>
          <div>单价</div>
          <div>数量</div>
          <div>金额</div>
        </li>
        <li v-for="(item,index) in miNiCommList" :key="item.id">
          <div>{{item.num}}</div>
          <div>{{item.name}}</div>
          <div>{{item.unit}}</div>
          <div>{{item.salePrice? item.salePrice : 0}}</div>
          <!-- <div><el-input-number v-model="item.number"  size="mini" label="描述文字"></el-input-number></div> -->
          <div class="input-number">
            <div class="input-number-count clearfix">
              <p @click="add(index)">+</p><input v-model="item.number" /><p style=" border-radius: 0  5px  5px 0;" @click="plus(index)">-</p>
            </div>
          </div>
          <div>{{item.number*item.salePrice}}</div>
        </li>
        <li class="header">
          <div></div>
          <div></div>
          <div></div>
          <div>合计：</div>
          <div>共{{totleNumber}}件</div>
          <div>{{totle_Price}}元</div>
        </li>
      </ul>
      <div style="margin-top:20px;">
        <span>支付方式</span>
        <el-select placeholder="请选择支付方式" v-model="paymentId">
          <el-option v-for="item in paymentList" :key="item.id" :label="item.payType" :value="item.id">
          </el-option>
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click.stop="dialog_account = false">取 消</el-button>
        <el-button type="primary" @click="addAccountSure">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 结账弹窗-->
    <el-dialog title="结账" :visible.sync="dialog_set_account" width="60%" center>
      <div class="account-content">
        <div>
          <div>房号：{{settleCountinfo.roomNum}}</div>
          <div>结账房间数：{{settleCountinfo.num}}</div>
          <div>客人姓名：{{settleCountinfo.person}}</div>
          <div>入住时间：{{settleCountinfo.liveTime}}</div>
        </div>
        <div>
          <div>来源：{{settleCountinfo.source}}</div>
          <div>入住单号：{{settleCountinfo.bills}}</div>
          <div></div>
          <div></div>
        </div>
      </div>
      <ul class="miNiCommListTable" style="max-height:450px;overflow-y:auto;">
        <li class="header">
          <div>房号</div>
          <div>项目名称</div>
          <div>消费金额</div>
          <div>支付方式</div>
          <div>收款金额</div>
          <div>入账时间</div>
          <div>操作员</div>
          <div>备注</div>
        </li>
        <li v-for="item in settleCountinfo.checkOrderList" :key="item.id">
          <div>{{item.roomName}}</div>
          <div>{{item.name}}</div>
          <div>{{item.money}}</div>
          <div>{{item.payType}}</div>
          <div>{{item.getMoney}}</div>
          <div>{{item.accoutTime}}</div>
          <div>{{item.operator}}</div>
          <div>{{item.remark }}</div>
        </li>
      </ul>
      <div style="display:flex;margin-top:20px;">
        <div style="flex:1">消费总金额：{{settleCountinfo.money}}</div>
        <div style="flex:1">已收金额：{{settleCountinfo.nowMoney}}</div>
        <div style="flex:1">本次应收：{{settleCountinfo.getMoney}}</div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click.stop="dialog_set_account = false">取 消</el-button>
        <el-button type="primary" @click="addSetAccountSure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
const Breadcrumb = () => import("@/components/common/Breadcrumb");
import { getRoomInfo, addCheck, getCountInfo } from "@/public/js/openRoom.js";
import {getColorList} from "@/public/js/setting.js"
import {
  getRoomStateList,
  getSelectList,
  upstate,
  commodityadd,
  getSetCountInfo,
  settleadd
} from "@/public/js/roomState.js";
import { format } from "@/public/js/util.js";
import { getPrices } from "@/public/js/order.js";
import validate from "@/public/js/validate";
export default {
  data() {
    var validateliveTime = (rule, value, callback) => {
      console.log(value);
      if (!value) {
        callback(new Error("请您输入入住时间"));
      } else if (value > this.ruleForm.leaveTime && this.ruleForm.leaveTime) {
        callback(new Error("入住时间不能大于离店时间!"));
      } else {
        callback();
      }
    };
    var validateLeaveTime = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请您输入离店时间"));
      } else if (value < this.ruleForm.liveTime && this.ruleForm.liveTime) {
        callback(new Error("入住时间不能大于离店时间!"));
      } else {
        callback();
      }
    };

    var validatepledgeMoney = (rule, value, callback) => {
      let re = /^(\-|\+)?\d+(\.\d+)?$/;
      if (value == "") {
        callback(new Error("请您输入押金"));
      } else if (!re.test(value)) {
        callback(new Error("请您输入正确的押金格式"));
      } else {
        callback();
      }
    };
    var validateEveryPrice = (rule, value, callback) => {
      let re = /^(\-|\+)?\d+(\.\d+)?$/;
      if (value == "") {
        callback(new Error("请您输入售价"));
      } else if (!re.test(value)) {
        callback(new Error("请您输入正确的格式"));
      } else {
        callback();
      }
    };
    return {
      content: {
        secondTitle: "房态图",
        type: "close"
      },
      buildingId: "",
      floorId: "",
      buildingRoomId: "",
      state: "",
      searchVal: "",
      roomRackNumList: [],
      floorList: [],
      centerDialogVisible: false,
      roomStateList: [],
      roomRackNumListDetail: [],
      roomStateColor: [],
      roomStateColors: [
        //1：空净房 / 2：空脏房 / 3：住净房 / 4：住脏房 / 5：维修房 / 6：已锁定 / 7：检查房 / 8：已预定 / 9：关闭房
        {
          color:""
        }
      ],
      currentIndex: "-1",
      title: "",
      dialog_roomState: false,
      dialog_openRoom: false,
      dialog_roomPrice: false,
      dialog_account: false,
      dialog_set_account: false,
      currentRoomState: "",
      outType: 2,
      payType: "",
      staffName: "",
      papersType: "",
      staffList: [], //业务员列表
      paymentList: [], //支付方式列表
      nationList: [], //名族列表
      papersList: [], //身份列表
      sex: "1", //性别
      billsList: [], //订单列表
      roomName: "", //房型名称
      roomId: "",
      buildingRoom: "", // 房型
      sourcelList: [], //订单来源
      saleRoomList: [], //房价方案列表
      checkInAddInfo: "", //入离时间
      orderRoomPricesList: [], //每日房间列表
      salePrice: "",
      date: "",
      totlePrice: "",
      nationId: 1,
      address: "",
      remark: "",
      priceIndex: "",
      commodityBill: "", //入账信息
      miNiCommList: "",
      settleCountinfo: "", //结算信息
      roomState: "",
      editRoomStateList: [],
      paymentId:'',
      // 表单验证数据
      ruleForm: {
        checkInId: "", //入住单号
        sourceId: "", //来源
        saleRoomId: "", //房价方案
        liveTime: "", //入住时间
        leaveTime: "", //预离时间
        person: "", // 入住人
        papersId: 1, //身份证件
        personId: "", //证件号码
        phone: "", // 电话号码
        comeFrom: "", // 出身年月日
        paymentId: "", //支付方式
        pledgeMoney: "" //押金
      },
      /**验证规则 */
      rules: {
        checkInId: [
          { required: true, message: "请您选择入住单号", trigger: "change" }
        ],
        sourceId: [
          { required: true, message: "请您选择来源", trigger: "change" }
        ],
        saleRoomId: [
          { required: true, message: "请您选择房价方案", trigger: "change" }
        ],
        liveTime: [{ validator: validateliveTime, trigger: "change" }],
        leaveTime: [{ validator: validateLeaveTime, trigger: "change" }],
        person: [
          { required: true, message: "请您数据入住人姓名", trigger: "blur" }
        ],
        personId: [
          { required: true, message: "请您输入证件号码", trigger: "change" }
        ],
        phone: [{ validator: validate.checkTel, trigger: "blur" }],
        comeFrom: [
          { required: true, message: "请您选择出生年月日", trigger: "change" }
        ],
        paymentId: [
          { required: true, message: "请您选择支付方式", trigger: "change" }
        ],
        pledgeMoney: [
          { validator: validatepledgeMoney, trigger: "blur", required: true }
        ],
        salePrice: [
          { validator: validateEveryPrice, required: true, trigger: "blur" }
        ]
      },
      // 每日房价数据验证
      ruleFormPrice: {
        salePrice: ""
      }
    };
  },
  watch: {
    outType(val) {
      this.checkInId = "";
      this.sourceId = "";
      this.$refs["ruleForm"].resetFields();
      this.rest();
    },
    orderRoomPricesList: {
      handler(newValue, oldValue) {
        if (newValue.length) {
          this.setTotlePrice();
        }
      },
      deep: true
    },
    roomState(val) {
      if (val === 3) {
        this.editRoomStateList = this.roomStateList.filter(
          item => item.state === 4
        );
      } else if (val === 4) {
        this.editRoomStateList = this.roomStateList.filter(
          item => item.state === 3
        );
      } else {
        this.editRoomStateList = this.roomStateList.filter(
          item => item.state !== 3 && item.state !== 4 && item.state !== val
        );
      }
    }
  },
  created() {
    this.getSelectData();
    this.getRoomStateColorList();
  },
  mounted() {},
  methods: {
    // 获取房态图颜色列表
    getRoomStateColorList(){
      getColorList().then(res=>{
        this.roomStateColor = res.data.roomStatusHueList;
         this.roomStateColor.forEach(item=>{
           this.roomStateColors.push({
             color: item.hue
           })
         })
      })
    },
    add(index) {
      this.miNiCommList.forEach((item, i) => {
        if (i === index) {
          console.log(item);
          item.number++;
        }
      });
    },
    plus(index) {
      this.miNiCommList.forEach((item, i) => {
        if (i === index) {
          if (item.number === 0) return false;
          item.number--;
        }
      });
    },
    //
    rest() {
      this.ruleForm = {
        checkInId: "", //入住单号
        sourceId: "", //来源
        saleRoomId: "", //房价方案
        liveTime: "", //入住时间
        leaveTime: "", //预离时间
        person: "", // 入住人
        papersId: 1, //身份证件
        personId: "", //证件号码
        phone: "", // 电话号码
        comeFrom: "", // 出身年月日
        paymentId: "", //支付方式
        pledgeMoney: "" //押金
      };
      this.roomId = "";
      this.totlePrice = "";
      this.sex = "1";
      this.nationId = 1;
      this.address = "";
      this.remark = "";
      this.staffName = "";
    },
    // 前台办理获取每日房价
    getPriceList() {
      if (
        this.ruleForm.saleRoomId &&
        this.ruleForm.liveTime &&
        this.ruleForm.leaveTime &&
        this.ruleForm.leaveTime > this.ruleForm.liveTime
      ) {
        getPrices({
          saleRoomId: this.ruleForm.saleRoomId,
          roomsNum: 1,
          startTime: this.ruleForm.liveTime,
          endTime: this.ruleForm.leaveTime
        }).then(res => {
          if (!res.data.errCode) {
            this.orderRoomPricesList = res.data.orderPricesAll;
          }
        });
      }
    },
    setTotlePrice() {
      let totlePrice = 0;
      this.orderRoomPricesList.forEach(item => {
        totlePrice += parseFloat(item.salePrice);
      });
      this.totlePrice = totlePrice;
    },
    // 检查时间
    checkTime(val) {
      console.log(val);
    },
    formatData(timeStamp, fmt) {
      return format(timeStamp, fmt);
    },
    // 获取房态列表
    getList() {
      getRoomStateList({
        buildingId: this.buildingId,
        floorId: this.floorId,
        state: this.state,
        search: this.searchVal
      }).then(res => {
        if (!res.data.errCode) {
          this.roomRackNumListDetail = res.data.roomRackNumList;
          console.log("this.roomRackNumListDetail", this.roomRackNumListDetail);
        }
      });
    },
    // 获取下拉列表数据
    getSelectData() {
      getSelectList().then(res => {
        if (!res.data.errCode) {
          this.roomRackNumList = res.data.roomRackNumList;
          this.floorList = res.data.floorList;
          this.roomStateList = res.data.roomStateList;
          //设置初始值
          this.buildingId = this.roomRackNumList[0].id;
          this.getList();
        }
      });
    },
    //房区选择
    areaChange(val) {
      this.buildingId = val;
      this.getList();
    },
    // 房型设置
    floorChange(val) {
      this.floorId = val;
      this.getList();
    },
    // 选择房态
    roomStateChange(val) {
      this.state = val;
      this.getList();
    },
    // 选择对应房态
    selectRoomType(item, currentIndex) {
      this.currentIndex = currentIndex;
      this.currentRoomState = item.roomState;
      this.buildingRoomId = item.roomId;
    },
    // 房态变更弹窗
    updateRoomState(roomState) {
      console.log(roomState);
      this.roomState = roomState;
      this.dialog_roomState = true;
      this.title = "修改房态";
    },
    currentState(val) {
      this.currentRoomState = val;
    },
    setState() {
      upstate({
        buildingRoomId: this.buildingRoomId,
        roomState: this.currentRoomState
      }).then(res => {
        if (!res.data.errCode) {
          this.$message({
            message: "房态修改成功",
            type: "success"
          });
          this.dialog_roomState = false;
          this.getList();
        }
      });
    },
    openRoom() {
      this.title = "入住信息";
      this.dialog_openRoom = true;
      this.getInfo();
    },
    //查看房价
    editPrice(item, priceIndex) {
      this.dialog_roomPrice = true;
      this.priceIndex = priceIndex;
      this.ruleFormPrice.salePrice = item.salePrice;
      this.date = item.date;
      //this.saleRoomId = item.saleRoomId
      console.log(this.saleRoomId);
    },
    //确认修改房价
    editPriceSure(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // 前端修改房价
          this.orderRoomPricesList.forEach((item, index) => {
            if (this.priceIndex === index) {
              item.salePrice = this.ruleFormPrice.salePrice;
            }
            this.dialog_roomPrice = false;
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 获取入住请求信息
    getInfo() {
      getRoomInfo({
        outType: this.outType,
        buildingRoomId: this.buildingRoomId,
        checkInId: this.ruleForm.checkInId
      }).then(res => {
        if (!res.data.errCode) {
          //获取业务员列表
          let data = res.data;
          this.staffList = data.staffList;
          this.paymentList = data.paymentList;
          this.nationList = data.nationList;
          this.papersList = data.papersList;
          this.billsList = data.billsList;
          this.staffName = data.nowStaffId;
          this.roomName = data.roomName;
          (this.roomId = data.roomId), (this.buildingRoom = data.buildingRoom);
          this.sourcelList = data.sourcelList;
          this.saleRoomList = data.saleRoomList;
          this.checkInAddInfo = data.checkInAddInfo;
          this.ruleForm.saleRoomId = "";
          this.saleRoomList.forEach(item => {
            if (item.id === this.checkInAddInfo.saleRoomId) {
              this.ruleForm.saleRoomId = this.checkInAddInfo.saleRoomId;
            }
          });
          this.ruleForm.leaveTime = this.checkInAddInfo.leaveTime;
          this.ruleForm.liveTime = this.checkInAddInfo.liveTime;
          this.orderRoomPricesList = data.orderRoomPricesList;
          this.ruleForm.sourceId = this.checkInAddInfo.sourceId;
          this.ruleForm.paymentId = this.checkInAddInfo.payId;
          this.ruleForm.pledgeMoney = data.buildingRoom.pledgeMoney;

          // 获取每日房价
          this.getPriceList();
        }
      });
    },
    close(formName) {
      this.$refs[formName].resetFields();
      this.rest();
      this.outType = 2;
      this.orderRoomPricesList = [];
      this.dialog_openRoom = false;
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.addSure();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 新增提交
    addSure() {
      let orderRoomPricesList = [];
      this.orderRoomPricesList.forEach(item => {
        orderRoomPricesList.push({
          saleRoomId: this.saleRoomId,
          salePrice: item.salePrice,
          date: item.date
        });
      });
      let data = {
        outType: this.outType,
        checkInId: this.ruleForm.checkInId,
        roomId: this.roomId,
        saleRoomId: this.ruleForm.saleRoomId,
        buildingRoomId: this.buildingRoomId,
        roomNum: this.buildingRoom.num,
        sourceId: this.ruleForm.sourceId,
        liveTime: this.ruleForm.liveTime,
        leaveTime: this.ruleForm.leaveTime,
        roomPrice: this.totlePrice,
        person: this.ruleForm.person,
        papersId: this.ruleForm.papersId,
        personId: this.ruleForm.personId,
        phone: this.ruleForm.phone,
        comeFrom: this.ruleForm.comeFrom,
        sex: this.sex,
        nationId: this.nationId,
        address: this.address,
        paymentId: this.ruleForm.paymentId,
        deposit: this.ruleForm.pledgeMoney,
        operationId: this.staffName,
        remark: this.remark,
        orderRoomPricesList: orderRoomPricesList
      };
      //  如果为现金支付弹窗提醒是否已交押金
      if (this.checkInAddInfo.isPay != 2) {
        this.$confirm("请您确认客户是否已支付押金?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            addCheck(data).then(res => {
              if (!res.data.errCode) {
                this.$message({
                  message: "开房成功",
                  type: "success"
                });
                this.dialog_openRoom = false;
                this.getList();
              }
            });
          })
          .catch(() => {
            return false;
          });
      } else {
        addCheck(data).then(res => {
          if (!res.data.errCode) {
            this.$message({
              message: "开房成功",
              type: "success"
            });
            this.dialog_openRoom = false;
            this.getList();
          }
        });
      }
    },
    // 获取结账信息
    get_setCount_info() {
      getSetCountInfo({
        buildingRoomId: this.buildingRoomId
      }).then(res => {
        console.log(res.data);
        if (!res.data.errCode) {
          console.log();
          this.settleCountinfo = res.data;
          console.log(this.settleCountinfo);
        }
      });
    },
    /*********入账************/
    account() {
      this.dialog_account = true;
      this.getCount();
    },
    //获取入账信息
    getCount() {
      getCountInfo({
        buildingRoomId: this.buildingRoomId
      }).then(res => {
        this.commodityBill = res.data.commodityBill;
        this.miNiCommList = res.data.miNiCommList;
        this.paymentList = res.data.paymentList;
        this.paymentId = res.data.upPayTypeId;
        console.log(' this.paymentId', this.paymentId)
      });
    },
    //商品入账保存
    addAccountSure() {
      console.log(this.paymentId)
      if (!this.paymentId) {
        this.$message({
          message: "请选择支付方式",
          type: "error"
        });
        return false;
      }
      let commodityList = [];
      this.miNiCommList.forEach(item => {
        commodityList.push({
          name: item.name,
          money: item.salePrice,
          num: item.number,
          checkOrderId: item.checkOrderId ? item.checkOrderId : ""
        });
      });

      commodityadd({
        buildingRoomId: this.buildingRoomId,
        paymentId: this.paymentId,
        commodityList: commodityList
      }).then(res => {
        if (!res.data.errCode) {
          this.$message({
            message: "入账成功",
            type: "success"
          });
          this.dialog_account = false;
          this.getList();
        }
      });
    },
    /*******结账******** */
    settle_accounts() {
      this.dialog_set_account = true;
      this.get_setCount_info();
    },
    addSetAccountSure() {
      settleadd({
        checkInId: this.settleCountinfo.checkInId,
        checkOrderList: this.settleCountinfo.checkOrderList
      }).then(res => {
        if (!res.data.errCode) {
          this.$message({
            message: "结算成功",
            type: "success"
          });
          this.dialog_set_account = false;
          this.getList();
        }
      });
    }
  },
  computed: {
    totleNumber() {
      if (this.miNiCommList.length) {
        let _totleNumber = 0;
        this.miNiCommList.forEach(item => {
          _totleNumber += parseInt(item.number);
        });
        return _totleNumber;
      }
    },
    totle_Price() {
      if (this.miNiCommList.length) {
        let _totle_Price = 0;
        this.miNiCommList.forEach(item => {
          if (!item.salePrice) {
            item.salePrice = 0;
          }
          _totle_Price += parseInt(item.number) * parseInt(item.salePrice);
        });
        return _totle_Price;
      }
    }
  }
};
</script>
<style lang="scss">
#roomState {
  height:100%;
  padding-bottom:200px;
  .el-form-item__error {
    padding-top: 0;
  }
  .content {
    padding: 20px;
    position: relative;
    & > div {
      float: left;
      margin-right: 20px;
      .label {
        padding-right: 15px;
      }
    }
    .search {
      float: left;
      margin-left: 15px;
      padding: 9px 21px;
    }
  }
  .info {
    padding-left: 20px;
    li {
      float: left;
      margin-right: 15px;
      .item-label {
        display: inline-block;
        width: 10px;
        height: 10px;
        background: #fff;
        margin-right: 5px;
      }
    }
  }
  .main-box {
    padding: 20px;
    padding-bottom: 50px;
    height:100%;
    .main-content {
      .content-i {
        padding-bottom: 10px;
        .content-right {
          display: flex;
          flex-wrap: wrap;
          .content-ii {
            width: 140px;
            height: 100px;
            margin-right: 1px;
            line-height: 25px;
            padding: 15px;
            box-sizing: border-box;
            text-align: center;
            color: #fff;
            font-size: 14px;
            margin-bottom: 1px;
            position: relative;
            cursor: pointer;
            position: relative;
            .close {
              position: absolute;
              right: 5px;
              top: 5px;
              color: #6d2377;
            }
            .handle-box {
              position: absolute;
              width: 100%;
              top: 0;
              left: 0;
              background: #eee;
              z-index: 1111;

              li {
                padding: 10px;
              }
            }
          }
        }
        .content-label {
          line-height: 34px;
          width: 40px;
          font-size: 16px;
        }
      }
    }
  }
  .content-roomState {
    ul {
      display: flex;
      flex-wrap: wrap;
      li {
        width: 33.33%;
        margin-bottom: 10px;
      }
    }
  }
  .el-dialog--center .el-dialog__header {
    padding: 12px 30px 10px;
  }
  .el-radio__inner {
    border-radius: 0;
  }
  .demo-ruleForm {
    & > div {
      background: #eee;
      margin-bottom: 10px;
      padding-top: 20px;
    }
    .el-dialog__body {
      background: #f3f5f9;
    }
    .remark {
      .el-form-item {
        width: 550px;
        .el-textarea {
          width: 445px;
          textarea {
            height: 50px;
          }
        }
      }
    }
  }
  .el-dialog__body {
    background: #f3f5f9;
    border-top: 1px solid #ddd;
  }

  .address .el-input__inner {
    width: 445px;
  }
  .el-form-item {
    margin-bottom: 15px;
  }
  .price-box {
    .el-form-item__content {
      line-height: 34px;
    }
    .price-button {
      display: inline-block;
      font-size: 12px;
      padding: 0 12px;
      border: 1px solid #6d2377;
      cursor: pointer;
      border-radius: 4px;
      margin-right: 10px;
      &:hover {
        background: #6d2377;
        color: #fff;
      }
    }
  }
  .dialog_roomPrice {
    & > div {
      height: 34px;
      .label {
        width: 40px;
        display: inline-block;
      }
    }
  }
  .account-content {
    & > div {
      display: flex;
      padding-bottom: 15px;
      & > div {
        flex: 1;
      }
    }
  }
  .miNiCommListTable {
    border: 1px solid #ddd;
    border-right: 0;
    li {
      display: flex;
      border-bottom: 1px solid #ddd;

      div {
        flex: 1;
        line-height: 45px;
        font-size: 12px;
        text-indent: 23px;
        border-right: 1px solid #ddd;
      }
      &.header > div {
        background: #eef1f9;
        color: #415161;
      }
      & > .input-number .input-number-count {
        text-align: center;
        text-indent: 0;

        p {
          display: inline-block;
          background: #6d2377;
          height: 30px;
          line-height: 30px;
          width: 30px;
          border-radius: 5px 0 0 5px;
          color: #fff;
          cursor: pointer;
        }
        input {
          display: inline-block;
          height: 30px;
          line-height: 30px;
          border: none;
          width: 30px;
          text-align: center;
          border: 1px solid #6d2377;
          box-sizing: border-box;
        }
      }
    }
  }
}
</style>
